<template>
  <router-view v-slot="{ Component }">
    <component :is="Component" />
    <!-- <keep-alive>
      <component :is="Component" />
    </keep-alive> -->
  </router-view>

  <OutlineSort />
  <unitEdit />
  <replaceMaterialsDialog />
  <remarksDialog v-if="store.resizeShow" />
  <CustomDialog v-if="store.resizeShow" />
  <videoDialog v-if="store.resizeShow" />
  <addExbitionMode v-if="store.addExbitionShow" />
  <replaceScene />
  <messageModel
    submitText="前往"
    title="提示"
    :visible="store.loginModeShow"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
  <messageModel
    submitText="删除"
    title="提示"
    :visible="store.unitDleteShow"
    problem="删除后将无法恢复"
    message="是否进行删除操作？"
    @closeClick="unitDleteClose"
    @submitClick="unitDleteSuccess"
  />
</template> 

<script setup lang="ts">
// @ts-nocheck
import { orientationScroll } from '@/utils/scrollHtml';
import messageModel from '@/components/messageModel/index.vue';
import { addBrowseTemplate } from '@/utils/minxin';
import { setAuthorization, getHeardToken, getHeardXtoken, setMd5Info, removeAuthorization } from '@/api/utils';
import { watch, reactive, onMounted, ref, onUnmounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore } from '@/store';
import { useUserStore } from '@/store';
import replaceScene from '@/freeComponents/replaceScene/index.vue';
import addExbitionMode from '@/components/addExbitionMode/addExbition.vue';
import OutlineSort from '@/freeComponents/OutlineSort/OutlineSort.vue';
import unitEdit from '@/freeComponents/unitEdit/unitEdit.vue';
import remarksDialog from '@/freeComponents/remarksDialog/remarksDialog.vue';
import CustomDialog from '@/freeComponents/CustomDialog/index.vue';
import videoDialog from './freeComponents/videoDialog/videoDialog.vue';
import replaceMaterialsDialog from '@/freeComponents/replaceMaterials/index.vue';
import { getUrlTemplateId } from '@/utils/minxin';
const store = useProjectStore();
const userStore = useUserStore();
const route = useRoute();
const resizeShow = ref(true);
const state = reactive({
  includeList: [],
});
getUrlTemplateId();
store.auxiliaryId = 0;
store.setloginModeShow(false);
const closeClick = () => {
  store.setloginModeShow(false);
};
store.initType();
const handleFn = () => {
  if (route.name !== 'login' || route.name !== 'templateSquare') {
    getUrlTemplateId();
  }
  const token = getHeardToken();
  if (token) {
  } else {
    userStore.logout();
  }
};
const handleResize = () => {
  // store.resizeShow = false;
  // nextTick(() => {
  //   store.resizeShow = true;
  // });
};

const pathSubmitClick = () => {
  //确认登录
  store.setloginModeShow(false);
  store.exhibitsInfoShow = false;
  router.push({ path: '/login', query: { redirectType: 2 } });
};

const unitDleteClose = () => {
  //取消移除单元信息弹框
  store.unitDleteShow = false;
};
const unitDleteSuccess = () => {
  //确认移除
  store.deleteUnitInfo();
  store.unitDleteShow = false;
};
watch(
  route.query,
  () => {
    let ids = localStorage.getItem('projectId');
    if (route.query.projectId) {
      // localStorage.setItem('projectId', String(route.query.projectId));
      // pathTemplate();
    }
  },
  { deep: true },
);

document.addEventListener('visibilitychange', (e) => {
  if (document.visibilityState === 'hidden') {
    handleFn();
  }
});
window.addEventListener('pageshow', function (event) {
  handleFn();
});
window.addEventListener('beforeunload', function (event) {
  // 处理事件逻辑
  handleFn();
});
/*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"beforeunload"事件*/
window.addEventListener('focus', (e) => handleFn());

if (route.query.projectId) {
  pathTemplate();
}
window.document.title = `记忆网`;
const setTitle = (titleText: any) => {
  if (titleText) {
    window.document.title = `记忆网-${titleText}`;
  } else {
    window.document.title = `记忆网`;
  }
};
const setRem = () => {
  //每次屏幕变化重新加载
  // const isMobile = navigator.userAgent.match(
  //   /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
  // );
  // if (window.orientation == null || window.orientation === 180 || (window.orientation === 0 && isMobile)) {
  //   const designHeight = 900; // 设计稿高度，根据你的设计稿来设置
  //   const realHeight = document.documentElement.clientWidth || document.body.clientWidth; // 当前视口的高度
  //   const rem = (realHeight / designHeight) * 100; // 根据设计稿高度和当前视口高度计算rem值
  //   document.documentElement.style.fontSize = `${rem}px`; // 设置根元素的字体大小
  //   // alert(rem)
  // } else {
  // const designHeight = 900; // 设计稿高度，根据你的设计稿来设置
  // const realHeight = document.documentElement.clientHeight || document.body.clientHeight; // 当前视口的高度
  // const rem = (realHeight / designHeight) * 144; // 根据设计稿高度和当前视口高度计算rem值
  // document.documentElement.style.fontSize = `${rem}px`; // 设置根元素的字体大小
  // }

  handleResize();
};

// 初始设置rem
// setRem();

const infoData = () => {
  try {
    store.getFreeInfoData();
  } catch {}
};
infoData();
// 监听窗口大小变化，重新计算rem

onMounted(() => {
  // window.addEventListener('resize', setRem);
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // window.removeEventListener('resize', setRem);
  window.removeEventListener('resize', handleResize);
});

store.initTemplateList();
const router = useRouter();
</script> 
 
<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
}

#app {
  background: #fff;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  // overflow: hidden;
}
.laout {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #fff;
}
a:focus {
  outline: none;
}
.jy-edit-style {
  :deep(.jy-style-height) {
    height: calc(100vh - 48px);
  }
}
.jy-preview-style {
  :deep(.jy-style-height) {
    height: 100vh;
  }
}
.from-title-box-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>